<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <!-- 引入VUE.JS-->
    <script th:src="@{../../page/vue.js}" type="text/javascript" charset="utf-8"></script>
    <!--Axios请求-->
    <script th:src="@{../../page/axios.min.js}" type="text/javascript" charset="utf-8"></script>
    <!--elementUI-->
    <!-- 引入样式 -->
    <link rel="stylesheet" th:href="@{../../page/ElemtUI/ElementIndex.css}">
    <!-- 引入组件库 -->
    <script th:src="@{../../page/ElemtUI/index.js}"  charset="utf-8"></script>
    <style>
        .text-hidden {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <template>
            <el-page-header @back="goBack" content="活动大厅">
            </el-page-header>
        </template>
        <el-header>
            <template id="Vueform">
                <el-row :gutter="20">
                    <el-col :span="16" :offset="6">
                        <div class="grid-content bg-purple">
                            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                <el-form-item label="审批人">
                                    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
                                </el-form-item>
                                <el-form-item label="活动区域">
                                    <el-select v-model="formInline.region" placeholder="活动区域">
                                        <el-option label="区域一" value="shanghai"></el-option>
                                        <el-option label="区域二" value="beijing"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="onSubmit">查询</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-col>
                </el-row>


            </template>
        </el-header>
        <el-main>
            <template id="VueTable">
                <el-table
                        :data="activityList"
                        style="width: 100%"
                        :default-sort="{prop: 'date', order: 'descending'}"
                >
                    <el-table-column
                            prop="id"
                            label="活动编号（ID）"
                            sortable
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="activityName"
                            label="活动名称"
                            sortable
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="activityImage"
                            label="活动LOGO"
                            width="100">
                        <template scope="scope">
                            <img :src="url+scope.row.activityImage" width="80" height="80" class="head_pic"/>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="活动创建时间"
                            sortable
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="endTime"
                            label="活动结束时间"
                            sortable
                            width="180">
                    </el-table-column>
                    <!--show-overflow-tooltip 文字过多移出。显示半隐藏-->
                    <el-table-column
                            prop="activityDesc"
                            label="活动描述"
                            show-overflow-tooltip
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="openUserId"
                            label="创建创建者"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="isShow"
                            label="状态"
                            width="100">
                        <template slot-scope="scope">
                            <p v-if="activityList[scope.$index].isShow==1">已结束</p>
                            <p v-if="activityList[scope.$index].isShow==0">进行时</p>
                        </template>
                    </el-table-column>

                </el-table>
            </template>

        </el-main>
        <div>
            <!--ElementUI  分页-->
            <tempalate id="pageLimit">
                <div class="block" style="margin-left: 400px">
                    <span class="demonstration"></span>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="page"
                            :page-sizes="[5, 10, 15, 20]"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total">
                    </el-pagination>
                </div>
            </tempalate>
        </div>
    </el-container>

</div>

<script>
    const app = new Vue({
        el: '#app',//绑定节点
        data: {
            activeIndex: '1',
            formInline: {
                user: '',
                region: ''
            },
            url: "https://edu-gt.oss-cn-beijing.aliyuncs.com/",//图片前缀地址
            page: 1,//当前页
            pageSize: 5,//每页显示条数
            total: 400,//分页总数
            maxPage: 9,//最大页数
            activeIndex2: '1',
            activityList: [],//展示数列表据
        },
        templates:["#pageLimit","#VueTable","#Vueform"],
        created: function () {
            this.getActivityList(1);//初始化表格
        },
        methods: {
            formatter(row, column) {
                return row.address;
            },//表单提交方法
            onSubmit() {
                console.log('submit!');
            },//导航头部goBack方法
            goBack() {
                console.log('go back');
            },//初始化表格列表显示方法
            getActivityList() {
                var params = {"page": this.page, "limit": this.pageSize};
                axios.post("/student-activity/getActivityList", params, {emulateJSON: true}).then(response => {
                    // handle success  成功处理回调||response.data就是数据
                    //这里的直接的this指向的是window对象
                    this.activityList = response.data.data;
                    this.page = response.data.currentPage;
                    this.total = response.data.pageCount;
                    this.maxPage = response.maxPage;
                }).catch(error => {
                    // handle error  错误处理回调
                    console.log(error);
                });
            },//分页相关方法
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.page = val;
                console.log(`当前页: ${val}`);
                this.getActivityList();
            }
        }
    })
</script>
</body>
</html>